<script setup>
import {useHomeStore} from '@/stores/home'
import { useWindowSize } from '@vueuse/core'

const {width} = useWindowSize()

const store = useHomeStore()
const handleWeibo = () => {
  store.isShowWeiboHotSearch = true
}
const handleChat = () => {
  store.isShowChat = true
}
</script>

<template>
  <div class="footer transition" :class="{hidden: store.isMask}">
    <el-space :size="8" spacer="|" v-if="width > 768">
      <span @contextmenu.stop.prevent><a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备2023000514号-1</a></span>
      <span @contextmenu.stop.prevent><a target="_blank" href="https://gitee.com/li-chuwei/panda_start_page">李嘉斌 & 黎家伟 & 陈炜清</a></span>
      <span @contextmenu.stop.prevent><a href="#" style="color: white" @click="handleWeibo">热搜榜</a></span>
      <span @contextmenu.stop.prevent v-if="store.token"><a href="#" @click="handleChat">实时聊天</a></span>
    </el-space>
    <template v-else>
      <span @contextmenu.stop.prevent><a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备2023000514号-1</a></span>
      <span @contextmenu.stop.prevent><a target="_blank" href="https://gitee.com/li-chuwei/panda_start_page">李嘉斌 & 黎家伟 & 陈炜清</a></span>
      <span @contextmenu.stop.prevent><a href="#" style="color: white" @click="handleWeibo">热搜榜</a></span>
      <span @contextmenu.stop.prevent v-if="store.token"><a href="#" @click="handleChat">实时聊天</a></span>
    </template>
  </div>
</template>

<style lang="less" scoped>
.footer {
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;

  &:hover {
    color: white;
  }

  &.hidden {
    opacity: 0;
  }

  a {
    color: inherit;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media screen and (max-width: 768px) {
  .footer {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  span+span {
    margin-top: .35rem;
  }
}
</style>